<template>
  <div>
    <Row :gutter="10">
      <Col>
        <Card>
          <div class="live_wrapper clearfix" style="margin-top: 10px">
            <Button type="primary"
                    @click.stop="exportData()"
                    style="float:right; width: 80px;height: 34px;font-size: 14px; margin-left: 10px">导出
            </Button>
            <Input v-model="filter.name"
                   @on-search="search"
                   search
                   enter-button="搜索"
                   placeholder="请输入客户姓名"
                   style="display:inline-table; width: 210px; margin-right: 10px" />
            <Input v-model="filter.nickname"
                   @on-search="search"
                   search
                   enter-button="搜索"
                   placeholder="请输入微信昵称"
                   style="display:inline-table; width: 210px; margin-right: 10px" />
            <Input v-model="filter.phone"
                   @on-search="search"
                   search
                   enter-button="搜索"
                   placeholder="请输入手机号码"
                   style="display:inline-table; width: 210px; margin-right: 10px" />
          </div>

          <p class="admin_title">全部客户</p>

          <Row class="margin-top-10 table_pattern table_pattern2">
            <Table style="width: calc(100vw - 256px - 36px - 32px)"
                   :loading="loading"
                   :columns="columns"
                   :data="list"></Table>
          </Row>
          <Row class="margin-top-10">
            <Page :total="pagenation.totalPage"
                  :page-size="pagenation.perPage"
                  :current="pagenation.currentPage"
                  show-elevator
                  show-total
                  @on-change="change"></Page>
          </Row>
        </Card>
      </Col>
    </Row>
  </div>
</template>
<script>

import { customerList } from '@/api/main'

export default {
  name: 'customer-list',
  data () {
    return {
      pagenation: {},
      columns: [
        {
          key: 'nickname',
          title: '昵称',
          align: 'center',
          render: (h, params) => {
            return h('strong', params.row.nickname)
          },
        },
        {
          key: 'icon',
          title: '头像',
          align: 'center',
          render: (h, params) => {
            return h(
                'div',
                {
                  style: {
                    backgroundImage: 'url(' + params.row.icon + ')',
                    width: '100px',
                    height: '100px',
                    objectFit: 'cover',
                    margin: '10px auto',
                    position: 'relative',
                    cursor: 'pointer',
                    backgroundSize: 'cover',
                  },
                  on: {
                    click: e => {
                    },
                  },
                }
            )
          },
        },
        {
          key: 'name',
          title: '姓名',
          align: 'center',
          render: (h, params) => {
            return h('strong', params.row.name)
          },
        },
        {
          title: '手机号码',
          align: 'center',
          render: (h, params) => {
            return h('strong', params.row.phone)
          },
        },
        {
          title: '创建时间',
          align: 'center',
          render: (h, params) => {
            return h('strong', params.row.created_time)
          },
        },
      ],
      list: [],
      loading: true,
      filter: {
        page: 0,
        page_size: 20,
        name: '',
        nickname: '',
        phone: '',
      },
    }
  },
  watch: {},
  methods: {
    change: function (page) {
      this.loading = true
      this.filter.page = page - 1
      this.getList()
    },
    search: function () {
      this.filter.page = 0
      this.getList()
    },
    formatJson (filterVal, jsonData) {
      return jsonData.map(v => filterVal.map(j => v[j]))
    },
    exportData () {
      let _this = this
      _this.filter.page = 0
      _this.filter.page_size = 500
      _this.export_list = []
      _this.export()
    },
    export () {
      let _this = this
      customerList(this.filter).then(res => {
        if (res.code == 0) {
          if (res.data.length) {
            _this.export_list.push.apply(_this.export_list, res.data)
            _this.filter.page++
            setTimeout(() => {
              _this.export()
            }, 500)
          } else {
            _this.filter.page_size = 20
            const { export_json_to_excel } = require('../../excel/Export2Excel');
            const tHeader = ['昵称', '姓名', '手机号码', '注册时间'];
            const filterVal = ['nickname', 'name', 'phone', 'created_time'];
            const data = _this.formatJson(filterVal, _this.export_list)
            export_json_to_excel(tHeader, data, '客户信息')
          }
        }
      })
    },
    getList () {
      customerList(this.filter).then(res => {
        if (res.code == 0) {
          this.list = res.data
          this.loading = false
          this.pagenation.currentPage = parseInt(res.currentPage) + 1
          this.pagenation.totalPage = parseInt(res.totalPage)
          this.pagenation.perPage = parseInt(res.perPage)
        }
      })
    },
  },
  mounted () {
    this.getList()
  }
}
</script>
<style>
</style>
<style scoped lang="less">

</style>
